<template>
  <div class="topnav">
    <router-link to="/" class="logo">
      <svg class="icon">
        <use xlink:href="#icon-king"></use>
      </svg>
    </router-link>
    <ul class="menu">
      <li>
        <router-link to="/doc">文档</router-link>
      </li>>
    </ul>
    <svg v-if="toggleAsideButtonVisible" class="toggle-aside" @click="toggleAside">
      <use xlink:href="#icon-menu"></use>
    </svg>
  </div>
</template>

<script lang="ts">
import { inject, Ref } from 'vue'

export default {
  props: {
    toggleAsideButtonVisible: {
      type: Boolean,
      default: false
    }
  },
  setup () {
    const asideVisible = inject<Ref<boolean>>('asideVisible');

    const toggleAside = () => {
      if (asideVisible) asideVisible.value = !asideVisible.value;
    }

    return { toggleAside }
  }
}
</script>

<style lang="scss" scoped>
  $color: #007974;

  .topnav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    color: $color;
    z-index: 21;

    > .logo {
      max-width: 6em;
      margin-right: auto;

      > svg {
        width: 32px;
        height: 32px;
      }
    }

    > .menu {
      display: flex;
      white-space: nowrap;
      flex-wrap: nowrap;
    
      > li {
        margin: 0 1em;
      }
    }
    
    .toggle-aside {
      display: none;
      position: absolute;
      width: 32px;
      height: 32px;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: fade-out(black, 0.9);
    }

    // 放到后边是为了提升优先级 
    @media (max-width: 500px) {
      > .menu { display: none; }
      > .toggle-aside { display: inline-block; }
      > .logo { margin: 0 auto; }
    }
  }
</style>